<template>
  <div class="box" id="box">
    <!-- 1.头部导航条 -->
    <van-sticky>
      <van-nav-bar
        title="客服"
        left-arrow
        @click-left="onClickLeft"
        style="height: .46rem;line-height: .46rem;"
      >
      </van-nav-bar>
    </van-sticky>
    <!-- 2.点击选项卡 -->
    <div class="box_header" >
      <div v-for="(item, index) of list" :key="index" @click="select(item)" class="xuan">
        <p>{{ item }}</p>
        <span :class="active === item ? 'header_select' : ''"></span>
      </div>
      <div class="nonum">{{this.num}}</div>
    </div>
    <!-- 分割线 -->
    <van-divider />
    <!-- 3.选项卡详情 -->
    <ul class="service_card">
      <li @click="chat()">
        <img src="http://img1.imgtn.bdimg.com/it/u=1558260084,2328334705&fm=11&gp=0.jpg" alt=""/>
        <div class="service_detail">
           <h1>官方爱美管家</h1>
           <!-- <span>{{item.time}}</span> -->
           <p>您好，我是爱美资深官方咨询，为您筛选全世界最最最最最官方的资料</p>
        </div>
      </li>
      <li @click="servicer(allservice.proid)">
        <img :src="allservice.pro_pic" alt=""/>
        <div class="service_detail">
           <h1>{{allservice.clinic_name}}</h1>
           <!-- <span>{{item.time}}</span> -->
           <p>{{allservice.pro_introduce}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Sticky, Icon, Divider, Toast } from 'vant'
import { getProductById } from '@/api'
// import service from '../../../public/service.json'
Vue.use(NavBar)
Vue.use(Sticky)
Vue.use(Icon)
Vue.use(Divider)
Vue.use(Toast)
export default {
  data () {
    return {
      list: ['全部', '未回复', '已回复'],
      active: '全部',
      service: [],
      allservice: [],
      num: '0',
      test: []
    }
  },
  mounted () {
    getProductById({ proid: 100053 }).then(res => {
      this.allservice = res.data.data[0]
      // console.log(this.allservice)
    })
  },
  methods: {
    // 官方客服
    chat () {
      window._MEIQIA('withoutBtn')
      window._MEIQIA('init')
      window._MEIQIA('allSet', function () {
        window._MEIQIA('showPanel')
      })
    },
    servicer (servicerid) {
      const loginState = localStorage.getItem('loginState_AM')
      if (loginState === 'ok') {
        this.$router.push({ path: '/communication/' + 'servicerid=' + servicerid })
      } else {
        Toast('您还没有登录，快去登录吧')
        setTimeout(() => {
          this.$router.push('/login')
        }, 300)
      }
    },
    select (type) {
      this.service = []
      this.active = type
      if (this.active === '未回复') {
      }
      if (this.active === '已回复') {
      }
      if (this.active === '全部') {
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #464646;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #464646;
  font-weight: bold;
}
/deep/ .van-hairline--bottom::after {
  border:none;
}
/deep/.van-divider {
  border-color: #d3d3d3;
  margin:0;
}
.box_header {
  height: 0.45rem;
  width: 100%;
  padding: 0 .45rem;
  line-height: 0.45rem;
  display: flex;
  justify-content: space-between;
  color: #464646;
  background-color: transparent;
  position: relative;
  .nonum {
    position: absolute;
    line-height:.1rem;
    text-align: center;
    padding: .02rem;
    left:2rem;
    top:.08rem;
    background: red;
    width: .12rem;
    height: .12rem;
    border-radius: 50%;
    color: white;
  }
  .xuan {
    position: relative;
    p {
      padding: 0 0.03rem;
      text-align: center;
      font-size: 0.16rem;
      color: #464646;
    }
    .header_select {
      display: block;
      width: 100%;
      height: 0.1rem;
      background: #ffe7e8;
      border-radius: 0.03rem;
      position: absolute;
      bottom: 0.14rem;
      z-index: -1;
    }
  }
}
.service_card {
  li {
    position: relative;
    border-bottom: .01rem solid #eeeeee;
     img {
      width: .45rem;
      height: .45rem  ;
      margin: .235rem 0 .265rem .2rem;
      border-radius:50%;
    }
    .service_detail {
      position: absolute;
      left:.745rem;
      top:.34rem;
      h1 {
        font-size: .15rem;
        color: #464646;
      }
      span {
        position: absolute;
        right:-0.1rem;
        top:0rem;
        color: #c1c1c1;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.84);
      }
      p {
        font-size: .13rem;
        color: #adadad;
        width: 2.77rem;
        overflow: hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        margin-top:.045rem;
      }
    }
  }
}
</style>
